<template>
  <a-modal
    :title="title"
    width="800px"
    :visible="visible"
    :isLoading="isLoading"
    :maskClosable="false"
    @cancel="handleCancel"
    :footer="null"

  >
    <a-spin :spinning="isLoading">
      <div>
        <!-- 加载中 -->
        <a-spin :spinning="isLoading" />
        <!-- 订单内容 -->
        <div v-if="!isLoading" class="order-content">
          <!-- 订单进度步骤条 -->

          <!-- 订单信息 -->
          <a-card class="" :bordered="false" size="small">
            <!-- 订单操作 -->
            <template>
              <div class="ant-descriptions-title">补件操作</div>
              <!-- 提示栏 -->
              <div class="alerts mt-10 mb-15" v-if="record.order_status== PatchStatusEnum.CANCELLED.value">
                <a-alert
                  :message="record.update_time+'：用户取消了补件申请'"
                  banner
                />
              </div>
              <!-- 提示栏 -->
              <div class="alerts mt-10 " v-if="record.order_status== PatchStatusEnum.CHECK_FAILED.value">
                <a-alert
                  type="warning"
                  :message="'当前订单已由管理员'+record.check_user+'驳回，审核时间:'+record.update_time+' 审核说明：'+record.check_remark"
                />
              </div>

              <!-- 提示栏 -->
              <div class="alerts mt-10 " v-if="record.order_status== PatchStatusEnum.COMPLETED.value">
                <a-alert
                  message="该订单已完结"
                  type="success"
                />
              </div>

              <div class="alerts mt-10 " v-if="record.order_status== PatchStatusEnum.CHECK_SUCCESS.value">
                <a-alert
                  :message="'当前订单已由管理员'+record.check_user+'审核通过，审核时间:'+record.update_time+' 审核说明：'+record.check_remark"
                />
              </div>

              <!-- 操作栏 -->
              <div class="actions clearfix ">
                <div class="action-item" v-if="$auth('/patch/list/all.delivery') && record.order_status== PatchStatusEnum.NORMAL.value">
                  <a-button
                    v-if="
                      record.delivery_status == PatchStatusEnum.NORMAL.value
                    "
                    type="primary"
                    @click="handleDelivery"
                  >审核通过并发货</a-button>
                </div>
                <div class="action-item" v-if="$auth('/patch/list/all.refuse') && record.order_status== PatchStatusEnum.NORMAL.value">
                  <a-button
                    v-if="record.order_status == PatchStatusEnum.NORMAL.value"
                    type="danger"
                    @click="handleRefuse"
                  >驳回订单</a-button>
                </div>

                <!-- <div class="action-item" v-if="$auth('/patch/list/all.refuse')">
                  <a-button
                    type="info"
                    @click="handleRemark"
                  >填写备注</a-button>
                </div> -->

              </div>
              <div class="remark">
                <p><span>订单备注:</span>{{ record.remark }}<a href="javascript:void(0)" @click="handleRemark"><a-icon type="form" />编辑</a></p>
              </div>
              <a-divider class="o-divider" />
            </template>

            <!-- 订单信息 -->
            <a-descriptions title="订单信息">
              <a-descriptions-item label="订单号">{{ record.order_no }}</a-descriptions-item>
              <a-descriptions-item label="订单状态">
                <a-tag
                  :color="PatchStatusEnum[record.order_status].color"
                >{{ PatchStatusEnum[record.order_status].name }}</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="配送状态">
                <a-tag
                  :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
                >{{ DeliveryStatusEnum[record.delivery_status].name }}</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="店铺信息">
                <a-tooltip>
                  <span class="c-p">{{ record.shop_name }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="会员信息">
                <a-tooltip>
                  <template slot="title">会员ID: {{ record.user.user_id }}</template>
                  <span class="c-p">{{ record.user.nick_name }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="补件留言">
                <strong v-if="record.buyer_remark" v-html=" record.buyer_remark"></strong>
                <span v-else>--</span>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <!-- 商品信息 -->
          <a-card class="mt-20" :bordered="false">
            <div class="ant-descriptions-title">补件详情</div>
            <div class="goods-list">
              <div class="goods-item" v-for="(item,index) in record.images" :key="index">
                <div>
                  <div><img :src="record.upload_url+'/'+item.path" @click="shopPic(record.upload_url+'/'+item.path)"/></div>
                  <div>{{ record.types[index] }}</div>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 快递配送 -->
          <a-card
            v-if="record.delivery_type == DeliveryTypeEnum.EXPRESS.value"
            class="mt-20"
            :bordered="false"
          >
            <!-- 收货信息 -->
            <a-descriptions title="收货信息">
              <a-descriptions-item label="收货人姓名">{{ record.address.name }}</a-descriptions-item>
              <a-descriptions-item label="联系电话">{{ record.address.phone }}</a-descriptions-item>
              <a-descriptions-item label="收货地区">
                {{ record.shop_region }}
              </a-descriptions-item>
              <a-descriptions-item label="详细地址">{{ record.address.detail }}</a-descriptions-item>
            </a-descriptions>
            <!-- 发货信息 -->
            <template
              v-if="(
                record.delivery_status == DeliveryStatusEnum.DELIVERED.value
                  && !inArray(record.order_status, [PatchStatusEnum.CANCELLED.value])
              )">
              <a-divider class="o-divider" />
              <a-descriptions title="发货信息">
                <a-descriptions-item label="物流公司" >{{ record.express_company }}</a-descriptions-item>
                <a-descriptions-item label="物流单号">{{ record.express_no }}</a-descriptions-item>
                <a-descriptions-item label="发货状态">
                  <a-tag
                    :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
                  >{{ DeliveryStatusEnum[record.delivery_status].name }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="发货时间">{{ record.delivery_time }}</a-descriptions-item>
              </a-descriptions>
            </template>
          </a-card>

          <a-modal v-model="showPicModal" width="600px" :footer="null">
            <img :src="showPicUrl" style="max-width：500px;margin:0 auto;max-height:800px"/>
          </a-modal>

        </div>

        <DeliveryForm ref="DeliveryForm" @handleSubmit="handleRefresh" />
        <CancelForm ref="CancelForm" @handleSubmit="handleRefresh" />
        <RemarkForm ref="RemarkForm" @handleReset="handleReset"/>

      </div>

    </a-spin>

  </a-modal>
</template>

<script>
import { inArray } from '@/utils/util'
import * as Api from '@/api/patch'

import { GoodsItem, UserItem } from '@/components/Table'
import { DeliveryForm, CancelForm } from './'

import {
  DeliveryStatusEnum,
  DeliveryTypeEnum,
  OrderSourceEnum,
  OrderStatusEnum,
  PatchStatusEnum,
  PayStatusEnum,
  PayTypeEnum,
  ReceiptStatusEnum
} from '@/common/enum/order'

import RemarkForm from './RemarkForm'

export default {
  name: 'Detail',
  components: {
    GoodsItem,
    UserItem,
    DeliveryForm,
    CancelForm,
    RemarkForm
  },
  data () {
    return {
        // 对话框标题
      title: '审核取消订单',
      // 标签布局属性
      labelCol: { span: 7 },
      // 输入框布局属性
      wrapperCol: { span: 13 },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      isLoading: true,
      // 枚举类
      showDetail: false,
      DeliveryStatusEnum,
      DeliveryTypeEnum,
      OrderSourceEnum,
      OrderStatusEnum,
      PayStatusEnum,
      PatchStatusEnum,
      PayTypeEnum,
      ReceiptStatusEnum,
      // 外部方法
      inArray,
      // 正在加载
      // 订单ID
      orderId: null,
      // 订单详情
      record: {},
      // 订单步骤位置
      progress: 2,
      // 商品内容表头
      showPicModal: false,
      showPicUrl: ''

    }
  },
  created () {
    // 记录订单ID

  },
  methods: {

/**
     * 显示对话框
     */
    show (patchId) {
      // 显示窗口
      this.visible = true
       this.orderId = patchId
    // 刷新页面
      this.getDetail()
    },

    /**
     * 确认按钮
     */
    handleSubmit (e) {
      e.preventDefault()
      // 表单验证
      const app = this
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        // 提交到后端api

             if (!errors) {
            this.$confirm({
          title: '确定要驳回吗？',
          okText: '确定',
          okType: '取消',
          cancelText: 'No',
            onOk () {
            app.onFormSubmit(values)
            },
            onCancel () {
              console.log('Cancel')
            }
        })
        }
      })
    },

    /**
     * 关闭对话框事件
     */
    handleCancel () {
      this.visible = false
    },

    /**
    * 提交到后端api
    */
    onFormSubmit (values) {
    console.log(values)
      this.isLoading = true
      Api.refuse({ patchId: this.record.patch_id, form: values })
        .then((result) => {
          // 显示成功
          this.$message.success(result.message, 1.5)
          // 关闭对话框事件
          this.handleCancel()
          // 通知父端组件提交完成了
          this.$emit('handleSubmit', values)
        })
        .finally(() => {
          this.isLoading = false
        })
    },

      shopPic (src) {
        this.showPicModal = true
        this.showPicUrl = src
      },
    // 刷新页面
    handleRefresh () {
      // 获取当前记录
      // this.getDetail()
      this.$emit('handleSubmit')
       this.visible = false
    },

handleReset (values) {
  console.log('reset')
  this.$set(this.record, 'remark', values.remark)
  console.log(values)
  console.log(this.record)
},
    // 获取当前记录
    getDetail () {
      const { orderId } = this
      this.isLoading = true
      Api.detail({ orderId })
        .then(result => {
          // 当前记录
          this.record = result.data.detail
          // 初始化数据
          this.initData()
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    // 初始化数据
    initData () {
      // 步骤条位置
      // this.initProgress()
    },

    // // 步骤条位置
    // initProgress () {
    //   const { record } = this
    //   this.progress = 2
    //   record.pay_status === PayStatusEnum.SUCCESS.value && (this.progress += 1)
    //   record.delivery_status === DeliveryStatusEnum.DELIVERED.value && (this.progress += 1)
    //   record.receipt_status === ReceiptStatusEnum.RECEIVED.value && (this.progress += 1)
    // },

    // 订单发货
    handleDelivery () {
      const { record } = this
      this.$refs.DeliveryForm.show(record)
    },

    handleRefuse () {
      const { record } = this
      this.$refs.CancelForm.show(record)
    },

    handleRemark () {
      const { record } = this
      this.$refs.RemarkForm.show(record)
    },

    // 订单改价
    handleUpdatePrice () {
      const { record } = this
      this.$refs.PriceForm.show(record)
    }

  }
}
</script>
<style lang="less" scoped>
@import '~ant-design-vue/es/style/themes/default.less';

.remark{
  margin:10px 0px;
  font-size: 14px;
  a{
    font-size: 12px;
    text-decoration: underline;
    margin:0 10px
  }
}

// 订单详情页
.order-content {
  margin-bottom: 70px;

  /deep/.ant-descriptions-item > span {
    vertical-align: middle;
  }

  // 分割线
  .o-divider {
    margin-bottom: 32px;
  }

  // 步骤条
  .order-progress {
    height: 26px;
    line-height: 26px;
    background: #f8f8f8;
    border-radius: 13px;
    font-size: 14px;
    text-align: center;
    position: relative;

    &:before,
    &:after {
      content: '';
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: 13px;
      background: @primary-color;
    }

    &:after {
      background: ~`colorPalette('@{primary-color}', 3) `;
      z-index: 1;
    }

    &.progress-1 {
      &:before {
        width: 0;
      }

      &:after {
        width: 20%;
      }
    }

    &.progress-2 {
      &:before {
        width: 20%;
      }

      &:after {
        width: 40%;
      }
    }

    &.progress-3 {
      &:before {
        width: 40%;
      }

      &:after {
        width: 60%;
      }
    }

    &.progress-4 {
      &:before {
        width: 60%;
      }

      &:after {
        width: 80%;
      }
    }

    &.progress-5 {
      &:before {
        width: 100%;
      }

      &:after {
        width: 100%;
      }

      li {
        &:nth-child(5) {
          color: #fff;
        }
      }
    }

    li {
      width: 20%;
      float: left;
      border-radius: 13px;
      position: relative;
      z-index: 3;
    }

    .tip {
      font-size: 12px;
      padding-top: 10px;
      color: #8c8c8c;
    }

    &.progress-1 li:nth-child(1),
    &.progress-2 li:nth-child(1),
    &.progress-3 li:nth-child(1),
    &.progress-4 li:nth-child(1),
    &.progress-5 li:nth-child(1) {
      color: #fff;
    }

    &.progress-2 li:nth-child(2),
    &.progress-3 li:nth-child(2),
    &.progress-4 li:nth-child(2),
    &.progress-5 li:nth-child(2) {
      color: #fff;
    }

    &.progress-3 li:nth-child(3),
    &.progress-4 li:nth-child(3),
    &.progress-5 li:nth-child(3) {
      color: #fff;
    }

    &.progress-4 li:nth-child(4),
    &.progress-5 li:nth-child(4) {
      color: #fff;
    }
  }
  // 商品列表
  .goods-list {
    /deep/table {
      table-layout: auto;
    }
    .order-price {
      padding: 8px 20px;
      text-align: right;
    }
    display: flex;
    .goods-item{
      height: 120px;
      text-align: center;
      display: flex;
      align-content: center;
      font-size:18x;
      margin-right: 10px;
      flex-direction: column;
      img{
        width: 100px;
        height: 100px;
      }
    }
  }
  // 操作栏
  .actions {
    .action-item {
      float: left;
      margin-right: 8px;
    }
  }
}
</style>
